<template>
  <aside class="sidebar" ref="sidebar">
    <div class="sidebar-header" @click="foldSidebar()">收起</div>
    <ul class="sidebar-menu">
      <li>插件</li>
      <li>对话历史</li>
      <li>设置</li>
    </ul>
  </aside>
</template>
<script>
export default {
  methods: {
    foldSidebar() {
      this.$refs.sidebar.style.transform = "translateX(-250px)";
      this.$refs.sidebar.style.visibility = "hidden";
      this.$refs.sidebar.style.transition = "all 0.2s ease-in-out";
    },
    unfoldSidebar() {
      this.$refs.sidebar.style.transform = "translateX(0)";
      this.$refs.sidebar.style.visibility = "visible";
      this.$refs.sidebar.style.transition = "all 0.2s ease-in-out";
    },
  },
};
</script>

<style scoped>
.sidebar {
  height: 100%;
  width: 250px;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  overflow-x: hidden;
}

.sidebar-header {
  padding: 20px;
  cursor: pointer;
}
.sidebar-header:hover {
  background-color: #ececec;
}

.sidebar-menu {
  list-style: none;
  padding: 0 20px;
  margin: 0;
  flex: 1;
}

.sidebar-menu li {
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 8px;
}

.sidebar-menu li:hover {
  background-color: #ececec;
}
.sidebar-header {
  display: none;
}
@media screen and (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    transform: translateX(-250px);
    transition: left 0.3s ease-in-out;
  }
  .sidebar-header {
    display: block;
  }
}
</style>